<template>
  <div id="videoDetail">
   <header>
		 <routerNav :router='router' :v-if='router'></routerNav>
		 <bigVideoDetail @getRouters='getRouters'></bigVideoDetail>
	 </header>
	
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
// import routerNav from '../components/detailRouter/routerNav.vue';
// import bigVideoDetail from '../components/video/bigVideoDetail.vue';

export default {
  components: {
    routerNav:defineAsyncComponent(() => import(rootPath+'/src/components/detailRouter/routerNav.vue')),
		bigVideoDetail:defineAsyncComponent(() => import(rootPath+'/src/components/video/bigVideoDetail.vue')),
  },
	data(){
		return{
			router:'',
			drawer:true,
		  query:GetQueryString(),
		}
	},
 mounted(){
	 //SEO(this.query);
 },
	methods:{
		getRouters(val){
			this.router = val;
		}
	}
}
</script>

<style scoped>
#newesChannel {
	width: 100%;

  display: flex;
	justify-content: center;
  .navigation {
    width: 100%;
  }

  .content {
    /* width: 100%; */
		margin-top: 200px;
    background-color: #fff;
    display: flex;
    justify-content: center;
		width: 1200px;
    margin-top: 48px;
    .contentLeft {
      width: 840px;
    }
		.contentRight{
			width: 320px;
			margin-left: 40px;
			display: flex;
			flex-direction: column;
			height: 300px;
			.hotSort{
				margin-top: 36px;
			}
		}
  }

  .hotspot {
    margin-left: 40px;
  }
}
#videoDetail{
	width: 100%;
		min-width: 1280px;
		max-width: 2560px;

}
</style>
<style>
.mhover :hover {
    color: #Ff3333 !important;
    cursor: pointer;
  }
</style>
